<template>
  <view class="container" :class="{'show': show}">
    <view class="time">
      <view class="col" v-for="(digit, index) in digits" :key="index">
        <view class="flip" :class="{ active: digit.flipping }">
          <view class="next" :data-t="digit.next"></view>
          <view class="curr" :data-t="digit.current"></view>
        </view>
        <view class="next" :data-t="digit.next"></view>
        <view class="curr" :data-t="digit.current"></view>
      </view>
    </view>
    <view style="position: relative">
      <view class="gif">点我关闭</view>
      <image @click="show = false" src="@/static/gif/time-bg.gif" mode="aspectFit"
             style="width: 200rpx;height: 200rpx"/>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';

const show = ref(false)

const digits = ref(Array(6).fill().map(() => ({
  current: '0',
  next: '0',
  flipping: false
})));


let lastSec = -1;
let timer = null;

const getTimeStr = (date = new Date()) => {
  return [date.getHours(), date.getMinutes(), date.getSeconds()]
      .map(item => item.toString().padStart(2, "0"))
      .join("");
};

const updateTime = () => {
  const now = new Date();
  const s = now.getSeconds();
  if (s === lastSec) return;
  lastSec = s;

  const currStr = getTimeStr(now);

  digits.value.forEach((digit, i) => {
    if (digit.current !== currStr[i]) {
      digit.next = currStr[i];
      digit.flipping = true;
      setTimeout(() => {
        digit.flipping = false;
        digit.current = currStr[i];
      }, 500);
    }
  });
};


const showTime = () => {
  show.value = true
}

onMounted(() => {
  const timeStr = getTimeStr();
  digits.value.forEach((digit, i) => {
    digit.current = timeStr[i];
    digit.next = timeStr[i];
  });
  timer = setInterval(updateTime, 1000);
});

onBeforeUnmount(() => {
  clearInterval(timer);
});

defineExpose({showTime})
</script>

<style>
/* 适配手机端的样式 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  opacity: 0; /* 初始不可见 */
  transform: translateY(-100%);
  transition: all 0.5s ease;
  pointer-events: none; /* 初始不接受点击 */
}

.time {
  display: flex;
  gap: 8rpx;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-weight: bold;
}

.col {
  width: 13vw;
  height: 22vw;
  min-width: 60rpx;
  min-height: 80rpx;
  perspective: 22vw;
  position: relative;
}

.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* 显示时接受点击 */
}

.col:nth-child(3),
.col:nth-child(5) {
  margin-left: 4vw;
}

.curr,
.next {
  position: relative;
  width: 100%;
  height: 50%;
  font-size: 18vw;
  background: #1a1a1a;
  border-radius: 1.5vw;
  color: #ddd;
  overflow: hidden;
  box-sizing: border-box;
}

/* 伪元素内容 */
.flip .curr::before,
.flip .next::before,
.col > .curr::before,
.col > .next::before {
  position: absolute;
  content: attr(data-t);
  line-height: 22vw;
  text-align: center;
  height: 22vw;
  left: 0;
  right: 0;
}

.flip .curr::before,
.col > .next::before {
  top: 0;
}

.flip .next::before,
.col > .curr::before {
  bottom: 0;
}

/* 边框样式 */
.flip .curr,
.col > .next {
  border-bottom: 0.5vw solid #000;
}

.flip .next,
.col > .curr {
  border-top: 0.5vw solid #000;
}

/* 翻转动画 */
.flip {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-style: preserve-3d;
  transition: transform 0s;
  transform: rotateX(0);
}

.flip.active {
  transition: all 0.5s ease-in-out;
  transform: rotateX(-180deg);
}

.flip .next {
  transform: rotateX(-180deg);
  backface-visibility: hidden;
}

.flip .curr {
  position: absolute;
  top: 0;
  backface-visibility: hidden;
}

/* 手机横屏适配 */
@media (orientation: landscape) {
  .time {
    gap: 1vh;
  }

  .col {
    width: 8vh;
    height: 11vh;
    perspective: 11vh;
  }

  .col:nth-child(3),
  .col:nth-child(5) {
    margin-left: 2vh;
  }

  .curr,
  .next {
    font-size: 9vh;
  }

  .flip .curr::before,
  .flip .next::before,
  .col > .curr::before,
  .col > .next::before {
    line-height: 11vh;
    height: 11vh;
  }
}

.gif {
  width: 280rpx;
  height: 70rpx;
  position: relative;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60rpx auto 0;
  border-radius: 10rpx;
  width: 160rpx;
  height: 70rpx;
  position: relative;
  margin: 60rpx auto 0;
  background-color: #faf8f3;
  border: 1rpx solid #fbe2a0;
  border-radius: 10rpx;
}

.gif::after {
  content: '';
  width: 16rpx;
  height: 16rpx;
  position: absolute;
  right: 20rpx;
  bottom: -10rpx;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border-bottom: solid 1rpx #fbe2a0;
  border-right: solid 1rpx #fbe2a0;
}
</style>